<template>
    <div class="content">
        <h1 class="text-center">双包分部分项工程付款</h1>
        <el-row :gutter="20" class="mt30">
            <el-col :span="12">项目名称：{{ project.title }}</el-col>
            <el-col :span="12" class="text-right">合同完工期{{ project.end_date }}　<el-text class="cp" @click="isPrint = true">打印</el-text></el-col>
        </el-row>
        <el-table class="mt20" :data="tableData" :border="true" style="width: 100%">
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" />
            <el-table-column label="供应商单位" show-overflow-tooltip>
                <template #default="scope">
                    <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.b_name}}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="负责人" show-overflow-tooltip>
                <template #default="scope">
                    <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.b_agent}}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="联系电话" show-overflow-tooltip>
                <template #default="scope">
                    <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.b_agent_mobile}}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="合同金额" show-overflow-tooltip>
                <template #default="scope">
                    <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.price}}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="invoice_numbers" label="发票号码" />
            <el-table-column prop="updated_at" label="开票日期" />
            <el-table-column prop="price" label="开票金额" />
            <el-table-column label="税率" show-overflow-tooltip>
                <template #default="scope">
                    <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.tax_rate}}%</el-text>
                </template>
            </el-table-column>
            <el-table-column label="税金" show-overflow-tooltip>
                <template #default="scope">
                    <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.tax_price}}%</el-text>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template #default="scope">
                    <el-button link type="primary" @click="onApplicationPay(scope.row)" size="small">支付记录</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="备注" />
        </el-table>
    </div>

    <el-dialog v-model="isPrint" width="80%">
        <div id="print" class="print">
            <h1 class="text-center">双包分部分项工程付款</h1>
            <el-row :gutter="20" class="mt30">
                <el-col :span="16">项目名称：{{ project.title }}</el-col>
                <el-col :span="8" class="text-right">合同完工期{{ project.end_date }}</el-col>
            </el-row>
            <el-table class="mt20 custom-header-table" :data="tableData" :border="true" style="width: 100%">
                <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
                <el-table-column label="供应商单位" show-overflow-tooltip align="center"  width="110">
                    <template #default="scope">
                        <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.b_name}}</el-text>
                    </template>
                </el-table-column>
                <el-table-column label="负责人" show-overflow-tooltip align="center" width="70">
                    <template #default="scope">
                        <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.b_agent}}</el-text>
                    </template>
                </el-table-column>
                <el-table-column label="联系电话" show-overflow-tooltip align="center" width="120">
                    <template #default="scope">
                        <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.b_agent_mobile}}</el-text>
                    </template>
                </el-table-column>
                <el-table-column label="合同金额" show-overflow-tooltip align="center" width="90">
                    <template #default="scope">
                        <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.price}}</el-text>
                    </template>
                </el-table-column>
                <el-table-column prop="invoice_numbers" label="发票号码" align="center"  width="100" />
                <el-table-column prop="updated_at" label="开票日期" align="center"  width="120" />
                <el-table-column prop="price" label="开票金额" align="center" width="90" />
                <el-table-column label="税率" show-overflow-tooltip align="center" width="90" >
                    <template #default="scope">
                        <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.tax_rate}}%</el-text>
                    </template>
                </el-table-column>
                <el-table-column label="税金" show-overflow-tooltip align="center" width="90" >
                    <template #default="scope">
                        <el-text v-if="scope.row.material_contract">{{scope.row.material_contract.tax_price}}%</el-text>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="备注" />
            </el-table>
        </div>
        <div class="text-center mt30">
            <el-button @click="printElement('print')"> 打印 </el-button>
            <el-button type="info" @click="isPrint = false"> 取消 </el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="isPay" title="支付记录" width="60%">
        <el-table class="mt20" :data="applicationPay" style="width: 100%">
            <el-table-column type="index" :index="indexMethod_" width="120" />
            <el-table-column prop="price" label="支付金额" />
            <el-table-column label="支付公司" show-overflow-tooltip>
                <template #default="scope">
                    <el-text>{{scope.row.reimburse.pay_company}}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="pay_date" label="付款日期" />
        </el-table>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import http from '../../../../util/request';
import { PrinterService } from '../../../../util/printer'
const printer = new PrinterService()
const isPrint = ref(false)
const indexMethod = (index: number) => {
  return index += 1
}
const indexMethod_ = (index: number) => {
  return '第'+ (index += 1) +'次支付'
}
let project:any = sessionStorage.getItem('project')
project = JSON.parse(project)
const form = ref<any>({search:'',model:'MaterialPay',contract_type:3,page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
const tableData = ref<any[]>([])
const isPay = ref<boolean>(false)
const applicationPay = ref<any[]>([])

const onGetData = () => {
    
    form.value.loading = true
    tableData.value = []
    http.post('/material/cost',form.value).then((response:any)=>{
        form.value.loading = false
        tableData.value = response.data.data
        form.value.total = response.data.total
    })
}

const onApplicationPay = (data:any) => {
    http.post('/material/contractPayCost',{source_id:data.source_id}).then((response:any)=>{
        applicationPay.value = response.data.data
        isPay.value = true
    })
}

const printElement = (elementId:string) => {
    if(elementId){
        printer.printElement(elementId, { title: '　' })
        return;
    }
}


onMounted(()=>{
    onGetData()
})
</script>

<style scoped>
.print{width: 297mm;size: A4 landscape;margin:0px auto;padding: 0px 15px 0px 15px;}
.el-table{border: 1px solid #bbbbbb;margin-top: 5px;}
:deep(.custom-header-table .el-table__header th) {
  font-weight: 300 !important; /* 加粗 */
  color: #000000;
}
el-table .cell {font-size: .7rem !important;padding: 0px 3px;}
.el-text{font-size: .8rem !important;}

.el-table .el-table__header-wrapper th,
.el-table .el-table__body-wrapper td {
  border-color: #bbbbbb !important;
}
</style>